<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				background: red;				
			}
			.box2{
				background: green;				
			}
			
			.box1 p{
				width: 100px;
				background: yellow;
				
			}
						
			.box2 p{
				width: 100px;
				background: blue;				
			}
			p{
				float: left;
			}
			
			.box1::after{
				content: "";
				display: block;
				height: 0;
				visibility: hidden;
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 
		 清除浮动的第五种方式
		 使用伪元素选择器的方式可以清除浮动		 
		 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
		注意点:IE6中不支持这种方式,
		为了兼容IE6必须给前面的盒子添加*zoom:1;属性
		 -->
		 <div class="box1">
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 </div>
		 <div class="box2">
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 </div>
	</body>
</html>
